<template>
  <div class="app-container-flex">
    <NewFullScreen
      v-model="showDialog"
      :title="title"
      :btn-list="fullInfo.btnList"
    >
      <div class="model-panel">
        <div class="model-panel-title">
          <p>{{ $t('basic_information') }}</p>
        </div>
        <div class="model-panel-body">
          <page-form
            class="paddingBox order-model-formBox flex_wrap_start_start"
            v-model:ref-obj="formInfo.ref"
            :data="formInfo.data"
            :field-list="formInfo.fieldList"
            :label-width="formInfo.labelWidth"
            :rules="formInfo.rules"
          >
            <template v-slot:form-maintenanceName>
              <el-input
                v-model="formInfo.data.maintenanceName"
                class="not-mongolia"
                type="input"
                :disabled="true"
                placeholder="请选择维保商"
              >
                <template #append>
                  <el-icon @click="add"><MoreFilled /></el-icon>
                </template>
              </el-input>
            </template>
          </page-form>
        </div>
      </div>
      <select-org
        v-if="orgInfo.visible"
        v-model:show-dialog="orgInfo.visible"
        v-model:query="orgInfo.query"
        :check-box="false"
        :highlight-row="true"
        :title="请选择维保商"
        @callback="callBackSupplier"
        @reset="reset"
      />
    </NewFullScreen>
  </div>
</template>

<script setup name="supplierAddManage">
import { getMaintenanceAll, createMaintenance } from '@/api/core.js'
import PageForm from '@/components/PageForm/index'

import SelectOrg from '@/components/SelectOrg/index'
const emits = defineEmits()
const { proxy } = getCurrentInstance()
const props = defineProps({
  visible: {
    type: Boolean,
    default: true,
  },
  title: {
    type: Object,
    default: function () {
      return ''
    },
  },
})
// 表单相关
const formInfo = ref({
  ref: null,
  data: {
    maintenanceName: '',
    maintenanceId: '',
    contact: '',
    contactNumber: '',
  },
  fieldList: [
    { label: '维保商名称', value: 'maintenanceName', type: 'slot' },
    { label: '联系人', value: 'contact', type: 'input' },
    { label: '联系人电话', value: 'contactNumber', type: 'input' },
    {
      label: '服务范围',
      value: 'serviceScope',
      type: 'select-model',
      checkDefault: false,
      disabled: true,
      code: 'service_scope',
    },
  ],
  rules: {
    supplierName: [
      {
        required: true,
        message: proxy.$t('null_supplier_name'),
        trigger: 'change',
      },
    ],
    contactNumber: [{ validator: proxy.$validate.cellphone, trigger: 'blur' }],
  },
  labelWidth: '120px',
})
const orgInfo = ref({
  visible: false,
  query: {
    typeLike: 'maintenance',
    idNotIn: '',
    status: 1,
  },
})
const fullInfo = ref({
  btnList: [{ label: '保存', event: save, show: true }],
})

const showDialog = computed({
  get() {
    return props.visible
  },
  set(val) {
    // 更新父组件visible
    emits('update:visible', val)
  },
})
watch(
  () => props.visible,
  (val) => {
    showDialog.value = val
  }
)

// 添加
function add() {
  //获取需要过滤的已添加的维保商
  getMaintenanceAll().then((res) => {
    if (res.success) {
      let ids = []
      res.data.map((item) => {
        ids.push(item.maintenanceId)
      })
      orgInfo.value.query.idNotIn = ids.toString()
      orgInfo.value.visible = true
    }
  })
}
function callBackSupplier(row) {
  if (row) {
    formInfo.value.data.maintenanceId = row.id
    formInfo.value.data.maintenanceName = row.name || ''
    formInfo.value.data.contactNumber = row.phone || ''
    formInfo.value.data.serviceScope = row.serviceScope
  }
}
function save() {
  formInfo.value.ref.validate((valid) => {
    const _formInfo = formInfo.value
    if (valid) {
      createMaintenance(_formInfo.data).then((res) => {
        if (res.success) {
          formInfo.value.data = {}
          showDialog.value = false
          emits('returnModify', false)
        }
      })
    }
  })
}
function reset() {
  orgInfo.value.visible = false
}
</script>

<style scoped></style>
